<template>
    <div class="hader_top">
         <div class="hader_top_color">GMQM质量管理系统</div>
         <div class="hader_top_right">
                <div class="hader_top_right_div1">  
                    <div class="el-icon-user"></div>   
                    <div style="width:100%; font-size:10px; margin-left:10px;" >{{Usernsme.Name}}</div>
                </div>  
                <div class="hader_top_right_div3">
                      <el-dropdown >
                        <span class="el-dropdown-link el-icon-s-home">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>首页</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                </div>
                 <div class="hader_top_right_div2">
                    <el-dropdown >
                      <span class="el-dropdown-link el-icon-setting">
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <div @click="loginout">
                            <el-dropdown-item>退出</el-dropdown-item>
                        </div>
                      </el-dropdown-menu>
                    </el-dropdown>
                </div >
                
                  <div class="hader_top_right_div4"><span class="el-icon-rank" @click="fullScreen"></span></div>
         </div>
    </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
    export default {
        data(){
          return{
             Usernsme:'',
             fullscreen: false,
            }
        },
        methods:{
           loginout(){
              this.ajax(`/logout`).then((res)=>{
                // console.log(res);
                if(res.status == 200){
                   sessionStorage.clear();
                   this.$router.push('/')
                }
              })
           },
            fullScreen(){
              let element = document.documentElement;
              if (this.fullscreen) {
                this.$message.success("退出全屏模式");
                this.fullscreenTitle = "进入全屏模式";
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
              } else {
                this.$message.success("进入全屏模式");
                this.fullscreenTitle = "退出全屏模式";
                if(element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
              }
              this.fullscreen = !this.fullscreen;
              }
        },
        mounted() {
           var username = sessionStorage.getItem('userinfo');
           this.Usernsme = JSON.parse(username);
          //  console.log(this.Username)
           
        },
    
    }
</script>

<style scoped>
 .hader_top
 {
   width:100%;
   /* background:rgb(16, 107, 245); */
   display:flex;
   align-items:center;
   justify-content: space-between;
 }
 .hader_top .hader_top_color 
 {
   padding:15px;  
   color:#fff;
   margin-left: 20px;
   /* margin-top:-15px; */
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
 }

 .hader_top_right
 {
   width:20%;
   margin-right:1%;
   color:#fff;
   /* border:1px solid #000; */
   display:flex;
   justify-content: space-between;
 }

 
  .el-icon-thumb
  {
    font-size:25px;
    color: #fff;
  }
  .el-icon-user
  {
    font-size:25px
  }
  .el-icon-setting
  {
     font-size:25px;
     color: #fff;
  }
  .el-icon-s-home
  {
     font-size:25px;
     color: #fff;
  }
  .el-icon-rank
  {
    font-size:27px;
  }

  .hader_top_right_div1
  { 
    width:35%;
    /* border:1px solid #ffffff; */
    display: flex;
    height:40px;
    align-items: center;
    /* box-shadow:0px 0px 0px 1px gainsboro; */
    border-radius:1px 1px 1px 1px;
  
  }

   .hader_top_right_div2
  { 
    width:20%;
    /* border:1px solid #ffffff; */
    display: flex;
    height:40px;
    align-items: center;
    justify-content: center;
    /* box-shadow:0px 0px 0px 1px gainsboro; */
    border-radius:1px 1px 1px 1px;
     
  }
   .hader_top_right_div3
  { 
    width:20%;
    /* border:1px solid #ffffff; */
    display: flex;
    height:40px;
    align-items: center;
    justify-content: center;
    /* box-shadow:0px 0px 0px 1px gainsboro; */
    border-radius:1px 1px 1px 1px;
    
  }
   .hader_top_right_div4
  { 
    width:20%;
    /* border:1px solid #ffffff; */
    display: flex;
    height:40px;
    align-items: center;
    justify-content: center;
    /* box-shadow:0px 0px 0px 1px gainsboro; */
    border-radius:1px 1px 1px 1px;
  }

  @media screen and (min-width:1920px){
     .hader_top_right
     {
       width:17%;
     }
  }
</style>